<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="UTF-8">
		<title>红酒会 - 智能红酒管家</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/favicon.ico" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.min.css" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${ctx}/static/styles/style.css" />
	</head>
<body>
	
	<c:import url="/header"><c:param name="module">talk</c:param></c:import>
	
	<div class="container" id="container">
		<div class="row">
				
			<!-- 内容 -->
			<div class="span8">
				<div>
					<ul class="breadcrumb">
						<li><a href="${ctx}/talk">酒说说</a> <span class="divider">/</span></li>
	  					<li class="active">${topic.title}</li>
					</ul>
				</div>
				<div>
					<h4>${topic.title}</h4>
					<div class="gray">作者：<a href="${ctx}/user/${topic.editorId}"
						target="_blank" style="padding-right:20px;">${topic.editorName}</a>
					<span class="pull-right">
						<fmt:formatDate value="${topic.editTime}" pattern="yyyy-MM-dd HH:mm"/></span></div>
					<c:if test="${not empty topic.tags}">
						<div style="padding-top:5px;">
							<div class="gray">标签：<c:forEach var="tag" items="${topic.tags}">
								<a href="${ctx}/talk/tag/${tag.id}" target="_blank">
									<span class="label label-important">${tag.name}</span></a>&nbsp;
							</c:forEach>
							</div>
						</div>
					</c:if>
					<hr/>
					<div class="topic">${topic.content}</div>
					<div class="clear-float"></div>
					<div style="text-align:center;">
						<c:if test="${not empty sessionScope.user.id}">&nbsp;&nbsp;
							<a href="javascript:void(0);" class="btn btn-warning" onclick="openFavorite();">
								<i class="icon-heart icon-white"></i>&nbsp;收&nbsp;&nbsp;&nbsp;藏&nbsp;&nbsp;</a>&nbsp;&nbsp;
						</c:if>
						<c:if test="${sessionScope.user.id==topic.editorId}">
							<a href="${ctx}/talk/edit/${topic.id}" class="btn"><i class="icon-pencil"></i>
							&nbsp;修&nbsp;&nbsp;&nbsp;改&nbsp;&nbsp;</a>&nbsp;&nbsp;
							<a href="javascript:void(0)" class="btn btn-danger" onclick="showConfirm(true);">
							<i class="icon-remove-sign icon-white"></i>
							&nbsp;删&nbsp;&nbsp;&nbsp;除&nbsp;&nbsp;</a>
						</c:if>
					</div>
					<div style="padding-top:10px;"></div>
					<div class="alert alert-block alert-error fade in" id="confirmDiv" style="display:none">
		            	<button type="button" class="close" data-dismiss="alert">&times;</button>
		            	<p><strong class="alert-heading">警告！</strong> 您的说说将被永久删除！</p>
		            	<p>
		            		<a class="btn" href="javascript:void(0)" onclick="showConfirm(false)">取消</a>
		              		<button class="btn btn-danger" onclick="deleteTopic(${topic.id});">删除</button>
		            	</p>
		          	</div>
					<hr/>
					<c:if test="${not empty recommendList}">
						<div>
							<h5 style="color:#898989">相关推荐</h5>
							<c:forEach var="recommend" items="${recommendList}">
								<p><a href="${ctx}/talk/detail/${recommend.id}">${recommend.title}</a></p>
							</c:forEach>
							<hr/>
						</div>
					</c:if>
					<form id="commentForm" action="${ctx}/talk/comment/create" method="post">
						<input type="hidden" id="topicId" name="topicId" value="${topic.id}"/>
						<input type="hidden" name="authorId" value="${topic.editorId}"/>
						<input type="hidden" name="redirectUrl" value="/talk/detail/${topic.id}"/>
						<div class="well">
							<textarea id="content" name="content" rows="3" style="width:95%"></textarea>
							<button id="btnCommentSubmit" type="button"
								class="btn btn-primary">&nbsp;&nbsp;评&nbsp;&nbsp;&nbsp;论&nbsp;&nbsp;</button>
							<span id="commentMsg" style="padding-left:20px;color:red;"></span>
						</div>
					</form>
					<hr/>
					<c:forEach var="comment" items="${commentList}">
						<div>
							<a href="${ctx}/user/${comment.creatorId}" target="_blank">${comment.creatorName}</a><br/><br/>
							${comment.content}<br/><br/>
							<span style="color:gray"><fmt:formatDate value="${comment.createTime}" pattern="yyyy-MM-dd HH:mm"/></span>
							<hr/>
						</div>
					</c:forEach>
				</div>
			</div>
			
			<!-- 侧栏 -->
			<div class="span4">
				<c:import url="/talk/right"><c:param name="module">talk</c:param></c:import>
			</div>
			
			<script type="text/javascript">
				$(function() {
					<%-- 提交评论 --%>
					$('#btnCommentSubmit').click(function() {
						if($('#content').val().length == 0) {
							$('#commentMsg').text("请输入评论内容！");
						}else if($('#content').val().length > 200) {
							$('#commentMsg').text("评论内容长度不能超过200！");
						}else {
							$('#commentForm').submit();
						}
					});
				});
				<%-- 删除个人文章确认DIV  --%>
				function showConfirm(flag) {
					if(flag) {
						$('#confirmDiv').show();
					}else {
						$('#confirmDiv').hide();
					}
				}
				<%-- 删除文章 --%>
				function deleteTopic(id) {
					var form = document.createElement('form');
					form.action = '${ctx}/talk/delete';
					form.method = 'post';
					var input = document.createElement('input');
					input.type = 'hidden';
					input.name = 'id';
					input.value = id;
					form.appendChild(input);
					document.body.appendChild(form);
					form.submit();
				}
				<%-- 打开收藏夹 --%>
				function openFavorite() {
					$.ajax({
						type: 'post',
						url: '${ctx}/talk/favorite/list',
						data: {topicId: $('#topicId').val()},
						success: function(data) {
							loadFavoriteList(data);
						}
					});
					$('#favModal').modal();
				}
				<%-- 显示新建收藏夹内容 --%>
				function openNewFavorite() {
					$('#favModal').modal('hide');
					$('#newFavModal').modal();
				}
				<%-- 新建收藏夹 --%>
				function createNewFavorite() {
					var favoriteName = $('#name').val().trim();
					if(favoriteName.length == 0) {
						$('#nameMsg').text('请填写名称');
					}else if (favoriteName.length > 10) {
						$('#nameMsg').text('名称不能超过10个字符');
					}else {
						$.ajax({
							type: 'post',
							url: '${ctx}/talk/favorite/op/create',
							data: {
								name: favoriteName,
								topicId: $('#topicId').val()
							},
							success: function(data) {
								$('#name').val('');
								loadFavoriteList(data);
								$('#newFavModal').modal('hide');
								$('#favModal').modal();
							}
						});
					}
				}
				function addOrRemove(id, topicId, favOrderNo) {
					$.ajax({
						type: 'post',
						url: '${ctx}/talk/favorite/op/addOrRemove',
						data: {
							id: id,
							topicId: $('#topicId').val()
						},
						success: function(data) {
							$('#favOrder' + favOrderNo).html('请稍后...');
							var html = '';
							if(data == 1) {
								html = '<img class="pull-right" width="18px" height="18px;"'
									+ ' src="${ctx}/static/images/fav_check.png" />';
							}
							$('#favOrder' + favOrderNo).html(html);
						}
					});
				}
				function loadFavoriteList(data) {
					var html = '<span style="color:gray">您可以创建一个文件夹，将喜欢的说说收藏起来</span>';
					if(data != 0) {
						html = '<ul class="nav nav-tabs nav-stacked">';
						var tmp = eval(data);
						for(var i=0; i<tmp.length; i++) {
							html += '<li><a href="javascript:;" onclick="addOrRemove(' + tmp[i].id
										+ ', ' + $('#topicId').val() + ', ' + i + ')">' + tmp[i].name;
							html += '<span id="favOrder' + i + '" class="pull-right gray">';
							if(tmp[i].stat == 1) {
								html += '<img width="18px" height="18px;"'
									+ ' src="${ctx}/static/images/fav_check.png" />';
							}
							html += '</span>';
							html += '</a></li>';
						}
						html += '</ul>';
					}
					$('#favoriteList').html(html);
				}
			</script>
		</div>
	</div>
	<div id="favModal" class="modal hide fade" tabindex="-1">
  		<div class="favorite-header">
    		<button type="button" class="close" data-dismiss="modal">×</button>
    		<h4>添加到收藏夹</h4>
  		</div>
  		<div class="modal-body">
    		<div id="favoriteList"></div>
  		</div>
  		<div class="modal-footer">
   			<button class="btn" data-dismiss="modal">关闭</button>
   			<a href="javascript:;" class="btn btn-primary" onclick="openNewFavorite();">创建收藏夹</a>
		</div>
	</div>
	
	<div id="newFavModal" class="modal hide fade" tabindex="-1">
  		<div class="favorite-header">
    		<button type="button" class="close" data-dismiss="modal">×</button>
    		<h4>创建新收藏夹</h4>
  		</div>
  		<div class="modal-body">
    		<div class="control-group form-horizontal">
				<label class="control-label" for="name">名称：</label>
				<div class="controls">
					<input type="text" id="name" name="name" class="input-medium">
					<span style="color:red" id="nameMsg"></span>
				</div>
			</div>
  		</div>
  		<div class="modal-footer">
  			<button class="btn" data-dismiss="modal">关闭</button>
  			<a href="javascript:;" class="btn btn-primary" onclick="createNewFavorite();">提交</a>
		</div>
	</div>
</body>
</html>